<!-- 颜色选择器 -->
<template>
  <div class="color-selector">
    <a-popover v-model:open="visible" placement="right" trigger="click" class="color-selector-popover" @openChange="visibleChange">
      <template #title>
        <div class="title-box">
          <h6 class="color-selector-title">{{ title }}</h6>
          <div @click="handleHide"><i class="iconfont icon-close-line"></i></div>
        </div>
      </template>
      <template #content>
        <div class="color-selector-content">
          <ul class="tabs-list">
            <li class="tabs-list-item" :class="[tabActive === 1 && ' tabs-list-item_active']" @click="onTabChange(1)">36色卡</li>
            <li class="tabs-list-item" :class="[tabActive === 2 && ' tabs-list-item_active']" @click="onTabChange(2)">自定义</li>
          </ul>
          <div class="tabs-content">
            <template v-if="tabActive === 1">
              <ul class="color-list">
                <li
                  v-for="item in colorList"
                  :key="item"
                  class="color-item"
                  :style="{ background: item }"
                  @click="handleChangeColor(item)"
                ></li>
              </ul>
            </template>
            <template v-if="tabActive === 2">
              <color-picker format="hex" is-widget picker-type="chrome" disable-history disable-alpha @pureColorChange="pureColorChange" />
            </template>
          </div>
        </div>
      </template>
      <slot>
        <div class="color-select-handle" :style="{ background: selectedColor }"></div>
      </slot>
    </a-popover>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { ColorPicker } from 'vue3-colorpicker'

  import { colorList } from './config'

  const emits = defineEmits(['update:selectedColor', 'onChange'])

  export interface Props {
    title?: string
    selectedColor?: string
  }

  withDefaults(defineProps<Props>(), {
    title: '选择颜色',
    selectedColor: '#ffffff'
  })

  // tabs
  const tabActive = ref(1)
  const onTabChange = (type: number) => {
    tabActive.value = type
  }

  //   const pureColor = ref('#ffffff')
  //   const gradientColor = ref('')
  // 改变颜色
  const handleChangeColor = (color: string) => {
    emits('update:selectedColor', color)
    emits('onChange', color)
    handleHide()
  }
  //
  const pureColorChange = (color: string) => {
    emits('update:selectedColor', color)
    emits('onChange', color)
  }

  // 选项卡状态
  const visible = ref<boolean>(false)
  const handleHide = () => {
    visible.value = false
    tabActive.value = 1
  }

  // 显示隐藏的回调
  const visibleChange = (visible: boolean) => {
    !visible && handleHide()
  }
</script>

<style lang="less" scoped>
  :deep(.vc-colorpicker) {
    width: 216px;
    box-shadow: none;

    .vc-colorpicker--container {
      padding: 12px 0;
    }
  }

  .color-selector {
    .color-select-handle {
      width: 100%;
      height: 36px;
      background: #3546b5;
      border: 1px solid #c4c4c7;
      border-radius: 6px;
      cursor: pointer;
    }
  }

  .title-box {
    display: flex;
    justify-content: space-between;

    > h6 {
      font-weight: 400;
      font-size: 12px;
      color: rgba(25, 25, 48, 0.75);
    }

    i {
      font-size: 9.5px;
      cursor: pointer;
    }
  }

  .tabs-list {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 216px;
    height: 34px;
    background: #f5f5f5;
    border: 1px solid #d9d9db;
    border-radius: 6px;
    gap: 0 6px;

    .tabs-list-item {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 102px;
      height: 28px;
      font-size: 12px;
      color: rgba(25, 25, 48, 0.75);
      cursor: pointer;

      &::after {
        position: absolute;
        right: -4px;
        display: block;
        width: 1px;
        height: 20px;
        background: #ccc;
        content: '';
      }

      &:last-child {
        &::after {
          content: none;
        }
      }
    }

    .tabs-list-item_active {
      font-size: 12px;
      color: rgba(16, 16, 20, 0.95);
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(37, 37, 45, 0.14), 0 2px 8px rgba(37, 37, 45, 0.14);
      font-weight: 700;
    }
  }

  .color-list {
    display: flex;
    padding: 12px 0;
    width: 216px;
    flex-wrap: wrap;
    gap: 10px 4px;

    .color-item {
      width: 20px;
      height: 20px;
      border: 0.5px solid #c4c4c7;
      border-radius: 1px;
      cursor: pointer;
    }
  }
</style>
